<template>
  <div id="introduction">

    <section class="detailsText">
      <div class="titleBox">
        <span class="title">{{ videoInfo.category.title }}</span>
        <div>{{ videoInfo.name }}</div>
      </div>

      <p>
        <span>{{ videoInfo.userinfo.name }}</span>
        <span>16.6万人次观看</span>
        <span>2181弹幕</span>
        <span>{{ videoInfo.date }}</span>
      </p>

      <div class="iconBox">
        <span @click="goodClick" :class="{ activeColor: goodActive }">
          <van-icon name="good-job" class="icon" size="5.556vw" />点赞
        </span>
        <span @click="collectClick" :class="{ activeColor: collectActive }">
          <van-icon name="star" class="icon" size="5.556vw" />收藏
        </span>
        <span @click="attentionClick" :class="{ activeColor: attentionActive }">
          <van-icon name="add" class="icon" size="5.556vw" />关注
        </span>
        <span @click="shareClick">
          <van-icon name="share" class="icon" size="5.556vw" />分享
        </span>
      </div>
    </section>
 
    <!-- 推荐视频 -->
    <section class="commend">
      <ArticleCover
        :article="article"
        v-for="(article, index) in commend"
        :key="index"
      />
    </section>
    <footer>已经到底了！！！</footer>
  </div>
</template>

<script>
import ArticleCover from "@/components/home/ArticleCover.vue";

export default {
  components: {
    ArticleCover,
  },
  props: ["videoInfo", "commend"],
  data() {
    return {
      collectActive: false,
      attentionActive: false,
      goodActive: false,
    };
  },
  methods: {
    // 点赞按钮 goodActive
    goodClick() {
      if (!localStorage.getItem("id") || !localStorage.getItem("token")) {
        this.$toast.fail("请先登录!");
        return;
      }
      this.goodActive = !this.goodActive;
    },
    // 收藏按钮
    async collectClick() {
      // 判断是否登录
      if (!localStorage.getItem("id") || !localStorage.getItem("token")) {
        this.$toast.fail("请先登录!");
        return;
      }
      let res = await this.$http.post(
        `/collection/${localStorage.getItem("id")}`,
        { article_id: this.$route.params.id }
      );
      this.collectActive = res.data.msg == "收藏成功" ? true : false;
    },
    // 进入页面获取是否已经收藏
    async collectInit() {
      if (localStorage.getItem("id") && localStorage.getItem("token")) {
        let res = await this.$http.get(
          `/collection/${localStorage.getItem("id")}`,
          {
            params: { article_id: this.$route.params.id },
          }
        );
        this.collectActive = res.data.success;
      }
    },
    // 关注按钮
    async attentionClick() {
      // 判断是否登录
      if (!localStorage.getItem("id") || !localStorage.getItem("token")) {
        this.$toast.fail("请先登录!");
        return;
      }
      let res = await this.$http.post(
        `/sub_scription/${localStorage.getItem("id")}`,
        { sub_id: this.videoInfo.userid }
      );
      this.attentionActive = res.data.msg == "关注成功" ? true : false;
    },
    // 进入页面获取是否已经关注
    async attentionInit() {
      if (localStorage.getItem("id") && localStorage.getItem("token")) {
        let res = await this.$http.get(
          `/sub_scription/${localStorage.getItem("id")}`,
          {
            params: { sub_id: this.videoInfo.userid },
          }
        );
        this.attentionActive = res.data.success;
      }
    },
    shareClick() {
      this.$toast.fail("分享功能尚未开放!");
    },
  },
  created() {
    this.collectInit();
    this.attentionInit();
  },
  watch: {
    $route() {
      this.collectInit();
    },
    videoInfo() {
      this.attentionInit();
    },
  },
};
</script>

<style lang="less" scoped>
#introduction {
  .detailsText {
    background-color: white;
    padding: 4.167vw;
    .titleBox {
      display: flex;
      font-size: 3.889vw;
      .title {
        height: 5.556vw;
        padding: 0 2.778vw;
        color: skyblue;
        background-color: #f4f4f4;
        border-radius: 2.778vw;
      }
      div {
        flex: 1;
      }
    }
    p {
      padding: 0.833vw 2.222vw;
      span {
        font-size: 3.333vw;
        color: #aaa;
        padding-right: 2.778vw;
        &:nth-child(1) {
          color: black;
          font-size: 3.611vw;
          padding-right: 5.556vw;
        }
      }
    }
    .iconBox {
      // background-color: red;
      display: flex;
      justify-content: space-around;
      span {
        font-size: 3.333vw;
        padding: 4.167vw 0 0 0;
        color: #757575;
        .icon {
          vertical-align: -1.389vw;
        }
      }
    }
  }
  .commend {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  footer {
    font-size: 3.611vw;
    color: #757575;
    text-align: center;
    padding: 2.778vw 0 1.389vw;
  }
  .activeColor {
    color: rgb(243, 60, 46) !important;
  }
}
</style>
